<%--
  Created by IntelliJ IDEA.
  User: 郭林泽
  Date: 2021-01-26
  Time: 14:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
</head>
<body>

    <div>
<%--        <h3>用户管理</h3>--%>
        <div class="layui-collapse">
            <div class=" layui-colla-item">
                <h2 class="layui-colla-title">查询</h2>
                <div class="layui-colla-content">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="username">
                    </div>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" onclick="search()">查询</button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/html" id="toolbar">
            <div class="layui-form layui-inline">
                </div>
                <div class="layui-input-inline" >
                    <button type="button" class="layui-btn" onclick="add()">添加用户</button>
                </div>
            </div>

        </script>
        <table id="userTb" lay-filter="userTb"></table>
    </div>
    <div id="add" style="display: none">
        <form class="layui-form" style="padding: 10px 30px 0px" lay-filter="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block">
                    <input type="text" name="userCode" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="userRole" lay-filter="role" id="role">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="1" title="男" checked>
                    <input type="radio" name="gender" value="2" title="女" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" id="date" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" class="layui-input">
                </div>
            </div>

        </form>
    </div>

<script src="webjars/layui/2.5.5/layui.js"></script>
<script>
    layui.use(["table","element","laydate"],function () {
        let element = layui.element;
        let table = layui.table;
        let laydate = layui.laydate;
        table.render({
            id:"userTb",
            elem:"#userTb",
            url:"/sys/user/search",
            toolbar:"#toolbar",
            cols:[[
                {title:"姓名",field:"username"},
                {title:"性别",field:"gender",templet(d){
                        return d.gender==1?"男":"女"
                    }},
                {title:"生日",field:"birthday"},
                {title:"地址",field:"address"},
                {title:"角色",templet(d){
                    return d.role.roleName==null?"-":d.role.roleName
                    }}
            ]],
            page:{limit:3,limits:[3,6,9]},
        });
        laydate.render({
            elem: '#date'
        });
    });

    function search() {
        layui.use(["jquery","table"],function () {
            let $ = layui.jquery;
            let table = layui.table;
            let username = $("#username").val();

            table.reload("userTb",{
                where:{username}
            });

        });
    }
    
    function add() {
        layui.use(["form","layer","jquery","table"],function () {
            let layer = layui.layer;
            let form = layui.form;
            let $ = layui.jquery;
            let table = layui.table;
            $("#add form")[0].reset();
            $.ajax({
                url: '/sys/role/searchAll',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $.each(data.data, function (index, value) {
                        $('#role').append(new Option(value.roleName,value.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
            // form.on('select(role)', function(data){
            //     // console.log(data.elem); //得到select原始DOM对象
            //     console.log(data.value); //得到被选中的值
            //     // console.log(data.othis); //得到美化后的DOM对象
            // });
            layer.open({
                type:"1",
                title:"添加用户",
                area:["450px"],
                content:$("#add"),
                btn:["确定","取消"],
                yes(){
                    let addForm = form.val("addForm");
                    console.log(addForm);
                    $.post("/sys/user/add",addForm).done(function (){
                        layer.close(layer.index);
                        table.reload("userTb");
                    });
                }
            });

        });
    }
</script>
</body>
</html>
